<template>
  <div class="app-container">
    <div class="table-container">
      <!-- 搜索 -->
      <el-row class="filter-container no-select">
        <!-- 简单搜索 -->
        <el-col :span="24" class="simple-filter">
          <!-- 按钮功能区 -->
          <el-button plain type="danger" icon="el-icon-delete" :disabled="filters.selectNumber <= 0" @click="dels">删除</el-button>
          <el-button plain type="danger" icon="el-icon-delete" :disabled="tableTotal <= 0" @click="clean">清空</el-button>
          <el-button v-if="false" plain type="warning" icon="el-icon-download">导出</el-button>

          <!-- 简单搜索框区 -->
          <div class="simple-search">
            <el-input v-model="filters.searchText" class="input-with-select" placeholder="请输入内容" @keyup.enter.native="getList">
              <el-button slot="append" icon="el-icon-search" title="搜索" @click="getList" />
            </el-input>

            <el-button type="primary" @click="showComplexFilter">高级搜索<i class="el-icon-zoom-in el-icon--right" /></el-button>

            <!-- 刷新 -->
            <el-button plain type="info" icon="el-icon-refresh" title="刷新" @click="getList" />
          </div>
        </el-col>
        <!-- 高级搜索 -->
        <el-col v-if="filters.isComplex" :span="24" class="complex-filter">
          <el-collapse-transition>
            <el-form :ref="filters.formRef" :model="filters.whereFields" label-width="100px" class="pane">
              <el-row :gutter="10">
                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item label="用户名称" prop="name">
                    <el-input v-model="filters.whereFields.name" placeholder="请输入用户名称" />
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item label="登录IP" prop="login_ip">
                    <el-input v-model="filters.whereFields.login_ip" placeholder="请输入登录IP" />
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item label="登录状态" prop="status">
                    <el-select v-model="filters.whereFields.status" clearable placeholder="请选择登录状态">
                      <el-option label="成功" value="1" />
                      <el-option label="失败" value="0" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="5">
                  <el-form-item label="登录时间" prop="created_at">
                    <el-date-picker
                      v-model="filters.whereFields.created_at"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item no-label class="no-label">
                    <el-button @click="resetComplexForm">重置条件</el-button>
                    <el-button type="primary" @click="getList">搜索</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-collapse-transition>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        border
        :data="tableData"
        class="filter-table"
        height="calc(100vh - 302px)"
        @selection-change="selectionChange"
        @sort-change="changeSort"
      >

        <el-table-column
          type="selection"
          align="center"
          width="40"
        />

        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="80"
          sortable
        />

        <el-table-column
          prop="name"
          label="登录名称"
          width="120"
          align="center"
        />

        <el-table-column
          prop="login_ip"
          label="登录IP"
          align="center"
        />

        <el-table-column
          prop="login_location"
          label="登录地点"
          :show-overflow-tooltip="true"
          align="center"
        />

        <el-table-column
          prop="browser"
          label="浏览器"
          :show-overflow-tooltip="true"
          align="center"
        />

        <el-table-column
          prop="platform"
          label="操作系统"
          :show-overflow-tooltip="true"
          align="center"
        />

        <el-table-column
          prop="status"
          label="登录状态"
          align="center"
          :show-overflow-tooltip="true"
          width="110"
          sortable
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'" disable-transitions>{{ scope.row.status ? '成功' : '失败' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="msg"
          label="操作信息"
          align="center"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="created_at"
          label="操作时间"
          align="center"
          width="150"
          sortable
        >
          <template slot-scope="scope">
            <span>{{ scope.row.created_at | parseTime }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格分页 -->
      <div class="filter-pagination no-select">
        <div v-show="filters.selectNumber > 0" class="select-text">共选择了<span class="number">{{ filters.selectNumber }}</span>条数据!</div>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[1,, 2, 5, 10, 15, 20, 30, 40, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { notEmpty } from '@/utils/validate'
import search from '@/utils/search'
import { saveLStorage, getLStorage, MD5 } from '@/utils/index'
import { search as searchApi, dels, clean } from '@/api/logininfor'

export default {
  name: 'Logininfor'
  , data() {
    return {
      searchFields: [
        { 'name': 'id', 'type': 'integer' }
        , { 'name': 'name', 'type': 'string' }
        , { 'name': 'login_ip', 'type': 'string' }
        , { 'name': 'login_location', 'type': 'string' }
        , { 'name': 'browser', 'type': 'string' }
        , { 'name': 'platform', 'type': 'string' }
        , { 'name': 'status', 'type': 'integer', 'selection': true, 'selectionList': [
          { 'value': '0', 'label': '失败' }
          , { 'value': '1', 'label': '成功' }
        ] }
        , { 'name': 'msg', 'type': 'string' }
        , { 'name': 'created_at', 'type': 'datetime' }
      ]
      , filters: {
        isComplex: false
        , formRef: ''
        , selectNumber: 0
        , searchText: ''
        , whereFields: {
          name: undefined
          , login_ip: undefined
          , status: undefined
          , created_at: undefined
        }
      }
      , loading: false
      , tableSelection: undefined
      // 分页条数
      , pageSize: 2
      // 当前页数
      , currentPage: 1
      // 总条数
      , tableTotal: 0
      // 当前展示数据
      , tableData: []
      // 排序
      , sort: []
    }
  }
  , created() {
    // 设置表单ref
    this.filters.formRef = this.getIsComplexFiltersKey()
    // 加载是否展示高级搜索
    var isComplex = getLStorage(this.filters.formRef)
    if (notEmpty(isComplex)) {
      this.filters.isComplex = isComplex
    }

    // 获取列表数据
    this.getList()
  }
  , methods: {
    getList() {
      this.loading = true
      searchApi(search.getQueryParams(this)).then(res => {
        var { data } = res
        if (this.currentPage > data.totalRows) {
          this.currentPage = data.totalRows
          this.getList()
        }

        this.tableData = data.rows
        this.tableTotal = data.total
        this.loading = false
      })
    }

    , dels() {
      if (this.filters.selectNumber) {
        var ids = this.tableSelection.map(val => val.id).join(',')
        this.$confirm('是否确认删除ID为[' + ids + ']的数据项?', '警告', {
          confirmButtonText: '确定'
          , cancelButtonText: '取消'
          , type: 'warning'
        }).then(() => {
          dels(this.tableSelection.map(val => val.id).join(',')).then(res => {
            // 获取数据
            this.getList()
            // 提示信息
            this.$message({ message: res.message, type: 'success' })
          })
        }).catch(() => {})
      }
    }

    , clean() {
      if (this.tableTotal > 0) {
        this.$confirm('是否确认清空所有数据项?', '警告', {
          confirmButtonText: '确定'
          , cancelButtonText: '取消'
          , type: 'warning'
        }).then(() => {
          clean().then(res => {
            this.currentPage = 1
            // 获取数据
            this.getList()
            // 提示信息
            this.$message({ message: res.message, type: 'success' })
          })
        }).catch(() => {})
      }
    }

    , handleSizeChange(val) {
      this.pageSize = val
      var maxPage = Math.ceil(this.tableTotal / val)
      if (maxPage < this.currentPage) {
        this.currentPage = maxPage
      }
      this.getList()
    }

    , handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    }

    // 表格数据选择
    , selectionChange(val) {
      this.tableSelection = val
      // 更新选择数量
      this.filters.selectNumber = notEmpty(val) ? val.length : 0
    }

    // 展示/隐藏高级搜索
    , showComplexFilter() {
      this.filters.isComplex = !this.filters.isComplex
      saveLStorage(this.filters.formRef, this.filters.isComplex)
      // 隐藏时重置表单
      if (!this.filters.isComplex) {
        this.resetComplexForm()
      }
    }

    // 重置高级搜索表单
    , resetComplexForm() {
      this.$refs[this.filters.formRef].resetFields()
      // 重新获取数据
      this.getList()
    }

    , getIsComplexFiltersKey() {
      return MD5(this.$route.path + this.$options.name)
    }

    // 表格排序
    , changeSort(val) {
      this.sort = val
      this.getList()
    }
  }
}
</script>

<style lang="scss">
  .app-main{
    background-color: #f2f2f2;

    .table-container {
      .filter-table {
        .el-table__header th{
          background: #f2f2f2;
        }

        .el-table__header tr th:nth-last-child(2),
        .el-table__body .el-table__row td:last-child{
          border-right-width: 0;
        }

        .el-table__body td.el-table-column--selection .cell{
          padding-right: 0.625rem;
        }
      }

      .filter-pagination {
        .el-pagination {
          .btn-prev,
          .btn-next,
          .el-pager li{
            background-color: transparent;
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  $bg: #fff;
  $space: 0.625rem;

  .table-container {
    background-color: $bg;
    border: 1px solid $--border-color-light;
    border-radius: 4px;
    overflow: hidden;

    .filter-container{
      background-color: $bg;
      padding: 0;

      .simple-filter {
        padding: $space;
        position: relative;
        .simple-search{
          position: absolute;
          right: $space;
          top: $space;
          .input-with-select{
            width: 13.75rem;
            margin-right: $space;
          }
        }
      }

      .complex-filter{
        padding: $space $space 0 $space;
        border-top: 1px solid $--border-color-light;
        .el-form-item{
          margin-bottom: $space;
        }
      }
    }

    .filter-table {
      border-left-width: 0;

      &::after,
      &::before {
        background-color: transparent;
      }
    }

    .filter-pagination {
      $elPaginationHeight: 32px;
      $paginationHeight: 40px;

      position: relative;
      height: $paginationHeight;
      line-height: $paginationHeight;
      padding: 0 $space;
      font-size: 13px;
      background-color: #fafafa;
      color: #606266;
      border-top: 1px solid $--border-color-light;

      .select-text .number {
        color: red;
        padding: 0 calc(#{$space} / 2);
      }

      .el-pagination {
        position: absolute;
        height: $elPaginationHeight;
        line-height: $elPaginationHeight;
        right: $space;
        top: 0;
        margin: calc((#{$paginationHeight} - #{$elPaginationHeight}) / 2) 0;
      }
    }
  }
</style>
